<template>
  <div class="main">
    <router-link to="/city">深圳<span class="iconfont icon-xiala"></span></router-link>
    <ul>
      <li> <router-link to="/movies/show_movies"><span>热映</span></router-link> </li>
      <li><router-link to="/movies/cinema"><span>影院</span></router-link></li>
      <li><router-link to="/movies/preper"><span>待映</span></router-link></li>
      <li><router-link to="/movies/classical"><span>经典电影</span></router-link></li>
    </ul>
    <router-link to="#"><span class="iconfont icon-ic_search24px"></span></router-link>

  </div>
</template>

<script>
export default {
  name:"ListItem",
  data(){
    return {
      
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  width:100%;
  background-color: #fff;
  height: 1.1733rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid rgb(242, 242, 242);

  a{
    text-decoration: none;
    color: black;
    font-size: .4rem;
    &:first-child{
      color: rgb(163, 163, 163);
    }
  }
  ul{
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    li{
      font-size: .3733rem;
      a{
        color:black;

        &.router-link-active{
          color:black;
          font-size: .48rem;
          font-weight: 700;
          height: 100%;
          padding-bottom: .2133rem;
          // padding-bottom: 2px;
          border-bottom: 2px solid rgb(240, 61, 55);
        }
      }
    }
  }
}

.change_style{
  font-size: .48rem;
  font-weight: 700;
  height: 100%;
  padding-bottom: .2133rem;
  // padding-bottom: 2px;
  border-bottom: 2px solid rgb(240, 61, 55);
}
</style>